<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/echarts.min.js"></script>
</head>

<body>
  <div style="width:600px;height:400px;border:1px solid #ff0000;"></div>
</body>
<script>
  let dom = document.querySelector("div")
  let myChart = echarts.init(dom)

  let myColor = ["#ff7b00", "#80b3ff", "#4c4c4c", "#07d9f9"]
  let option = {
    // color:["#ff7b00","#80b3ff","#4c4c4c","#07d9f9"],
    xAxis: {
      type: "category",     //类目轴
      data: ["张三", "李四", "王五", "赵六"]   //类目轴显示的内容
    },
    yAxis: {
      type: "value",        //数值轴
      axisLine: {          //是否显示y轴
        show: false
      }
    },
    series: [
      {
        type: "bar",        //柱状图
        barWidth: 50,        //柱状图的宽度
        data: [100, 160, 200, 120],   //柱状图的数据
        itemStyle: {
          // color:"blue",            //柱子填充色：纯色
          color: function (params) {
            return myColor[params.dataIndex]        //让颜色变化
          }
        }
      },

    ],
    grid: {
      show: true,           //显示网格
      width: 500,           //网格整体宽度
      borderWidth: 3,          //网格边框宽度
      borderColor: "#ffff00"   //网格边框颜色

    }
  }

  myChart.setOption(option)
</script>

</html>